<template>
<section>
    <div class="banner">
      <div class="container">
        <div class="row">
          <h1 class="banner_title">Shop Cart</h1>
          <div class="breadcrumb">
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
              <li><a href="shop.html">Shop</a></li>
              <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
              <li class="active"><a href="shop-cart.html">Shop Cart</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--================ Our banner Section end =================-->
    <section class="pad95-100-top-bottom shop-card-1">
      <div class="container">
        <h3 class="main hdi">Shopping cart</h3>
        <!--=========Cart Table start============-->
        <div class="cart-table">
          <ul class="cart-table-top">
            <li class="cart-wdt3">
              <label><input type="checkbox" v-model="checked" @click="checkall"></label>
            </li>
            <li class="cart-wdt1">
              商品
            </li>
            <li class="cart-wdt2">
              价格
            </li>
            <li class="cart-wdt2">
              数量
            </li>
            <li class="cart-wdt2">
              总额
            </li>
            <li class="cart-wdt3">
              操作
            </li>
          </ul>
          <ul class="cart-table-top cart-table-mid" v-for="(v,i) in goods_info" :key='i'>
            <li class="cart-wdt3 margin-txt">
              <label><input type="checkbox"  v-model="goods_new_info" :value="v.goods_id" @click="select(v.goods_id)"></label>
            </li>
            <li class="cart-wdt1">
              <span class="cartproduct-img"><img :src="v.goods_img" alt="cart-image"></span>
              <div class="cartproduct-desc">
                <p>{{v.goods_name}}</p>
              </div>
            </li>
            <li class="cart-wdt2 margin-txt">
              <span class="prdt-price ">￥{{v.goods_price}}</span>
            </li>
            <li class="cart-wdt2 margin-txt">
              <button class="cart-prdt-qty1" @click="handleAdd(v)">+</button>
              <input class="cart-prdt-qty" v-model="v.goods_num">
              <button class="cart-prdt-qty1" @click="handlereduce(v)">-</button>
            </li>
            <li class="cart-wdt2 margin-txt">
              <span class="prdt-price">￥{{v.goods_num*v.goods_price}}</span>
            </li>
            <li class="cart-wdt3 margin-txt">
              <img src="@/assets/images/shop-card/delete-icon.png" @click="delgoods(v)" width="16" height="22" alt="cart-image"> 
            </li>
          </ul>
          <ul class="cart-table-top cart-table-btm">
            <li><router-link class="continue-shop" :to="{name:'shop index'}">继续购物</router-link></li>
            <li><a class="continue-shop clear-shoppingbtn" @click="cleargoods(user_id)">清空购物车</a></li>
            <li class="pull-right">
              <div class="btn-123">
                <div class="sim-button button8">
                  <span @click="addOrder()">提交订单</span>
                </div>
              </div>
            </li>
            <li class="pull-right"> <h4>总金额为：{{sum_total | numFilter}}元</h4></li>
          </ul>
        </div>
        <!--=========Cart Table end============-->

        
        <!--=========Your Order start============-->
        
          </div>
    </section>
    
 
 </section>
    <!--================ Our footer Section start=================-->
</template>

<script>
  import {querygoods,altergoods,delgoods,cleargoods} from "@/api/shop_cart.js"
  import {addorder} from "@/api/order.js"
  import {getUserId} from "@/libs/util.js"
  export default {
    data() {
      return {
        goods_info: [],
        goods_new_info: [],
        user_id: getUserId(),
        checked: false,
        sum_total: 0,
        total: 0
      }
    },
    filters: {
      numFilter (value) {
        let realVal = ''
        if (!isNaN(value) && value!== '') {
          // 截取当前数据到小数点后两位
          realVal = parseFloat(value).toFixed(2)
        } else {
          realVal = '--'
        }
        return realVal
      }
    },
    methods:{
      alternums(value){
        console.log(value.goods_num)
      },
      delgoods(value){
        delgoods(value).then(res =>{
          if(res.data.status_code==10000){
            alert("删除该商品")
            this.goods_info.forEach((item,index) =>{
              if(item.goods_id==value.goods_id){
                this.goods_info.splice(index,1)
              }
            })
        }
        }).catch(err => {
          console.log("出错了")
          console.log(err)
        })
      },
      cleargoods(value){
        let data = {
          user_id:value
        }
        cleargoods(data).then(res =>{
          if(res.data.status_code==10000){
            alert("清空购物车")
            this.goods_info=[]
          }
        }).catch(err => {
          console.log("出错了")
          console.log(err)
        })
      },
      handleAdd(value){
        value.goods_num++
        let a = value.goods_price
        this.goods_info.forEach((item )=>{
          if(item.goods_id==value.goods_id){
            item.goods_num = value.goods_num
            // item.total = value.goods_num*a/100
            this.total = value.goods_num*a
            this.alterCartList(item)
          }
          })
      },
      handlereduce(value){
        if(value.goods_num>1){
          value.goods_num--;
          let a = value.goods_price
          this.goods_info.forEach((item) =>{
            if(item.goods_id==value.goods_id){
              item.goods_num = value.goods_num
              // item.total = value.goods_num*a/100
              this.total = value.goods_num*a
              this.alterCartList(item)
            }
          })
        }else{
          value.goods_num=1
          let a = value.goods_price
          this.goods_info.forEach((item) =>{
            if(item.goods_id==value.goods_id){
              item.goods_num = value.goods_num
              // item.total = value.goods_num*a/100
              this.total = value.goods_num*a
              this.alterCartList(item)
            }
          })
        }
      },
      alterCartList(item){
        altergoods(item).then(
        res => {
          if(res.data.status_code==10000){
            console.log("sucesss")
          }
        }
        )
      },
      getCartList(){
        console.log(this.user_id)
        querygoods(this.user_id)
        .then(
        res => {
          console.log(res.data)
          if(res.data.status_code==10000){
            this.goods_info = res.data.data
          }else{
            console.log(res.data.data)
          }
        }).catch(
          err => {
            console.log("出错了")
            console.log(err)
          }
        )
      },
      checkall(){
        if(this.checked){
          this.goods_new_info = []
          this.sum_total = 0;
        }else{
          this.goods_info.forEach(item =>{
           if (this.goods_new_info.indexOf(item.goods_id) == -1) {
             this.goods_new_info.push(item.goods_id)
             item.clickstaus = !item.clickstatus
             this.sum_total = this.sum_total+item.goods_price*item.goods_nums
           }
          })
        }
      },
      select(goods_id){
        this.goods_info.forEach(item => {
           if(item.goods_id == goods_id){
            item.clickstaus = !item.clickstaus
            if(item.clickstaus){
              console.log(item.clickstaus)
              this.sum_total = this.sum_total+item.goods_price*item.goods_num
              this.goods_new_info.push(item.goods_id)
              console.log(this.goods_new_info)
              if(this.goods_new_info.length == this.goods_info.length){
                this.checked = true
              }else{
                this.checked = false
              }
            }else{
              console.log(item.clickstaus)
              this.sum_total = this.sum_total-item.goods_price*item.goods_num
              this.goods_new_info.forEach((item1,index1) =>{
                if(item1 == goods_id){
                this.goods_new_info.splice(index1,1)
                console.log(this.goods_new_info)
                if(this.goods_new_info.length == this.goods_info.length){
                  this.checked = true
                }else{
                  this.checked = false
                }
            }})
          }
        }})
      },
      addOrder(){
        addorder(this.goods_new_info,this.user_id).then(res =>{
          if(res.data.status_code==10000){
            this.$router.push({name:"check out"})
          }
        })
        console.log(this.goods_new_info)
      }
    },
    mounted(){
      this.getCartList();
    }
  }
</script>

<style>
  .cart {
    width: 8%;
    float: left;
    text-align: center;
  }
</style>
